<template>
  <div class="cateList">
    <!--头部-->
    <van-search
      class="cateListHeader"
      v-model="value"
      placeholder="请输入搜索关键词"
      :disabled="true"
      @click = "toSearch"
    />
    <!--内容区域-->
    <div class="m-cateListMain">
      <!-- 左侧导航 -->
      <div class="cateListNav">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item
            class="navItem"
            :title="item.name"
            v-for="item in cateListNav"
            :key="item.id"
          />
        </van-sidebar>
      </div>
      <!-- 右侧主体 -->
      <div class="cateListMain">
        <div style="transform: translateY(0px)">
          <!-- 上方图片 -->
          <div class="banner">
            <lazy-component>
              <van-image :lazy-load="true" :src="currentBanner.picUrl" />
            </lazy-component>
          </div>
          <!-- 下方列表 -->
          <div v-for="c1 in currentCateList" :key="c1.id">
            <van-list v-model="loading" :finished="finished" @load="onLoad">
              <van-cell :title="c1.name" />
              <van-grid :column-num="3" :icon-size="72" :border="false">
                <van-grid-item
                  v-for="c2 in c1.categoryList"
                  :key="c2.id"
                  :icon="c2.wapBannerUrl"
                  :text="c2.name"
                  :data-subCategoryId="c2.id"
                  :data-categoryId="c2.superCategoryId"
                  @click="toCategoryList(c2.id, c2.superCategoryId)"
                />
                  <!-- to="/categorylist" -->
              </van-grid>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCateListNav, reqCurrentCateList } from "@/api";

export default {
  name: "catelist",
  data() {
    return {
      value: "",
      activeKey: 0,
      list: [],
      loading: false,
      finished: false,
      cateListNav: [], //导航数据
      currentCateList: {}, //选中的商品数据,
      currentBanner: {}, //大图信息
      currentId: "11",
    };
  },
  // 页面加载后的生命周期回调
  computed: {},
  mounted() {
    this.getCateListNav();
    this.getCurrentCateList(this.currentId);
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },
    onChange(index) {
      // this.activeKey
      this.activeKey = index;
      // this.currentCateList = this.cateListNav[this.activeKey];
      this.currentId = this.cateListNav[this.activeKey].id; //选中的类别的id
      this.getCurrentCateList(this.currentId);
    },
    async getCateListNav() {
      //第一步用第一个接口发起请求获取数据,不需要写参数
      //- ‘为你推荐’和分类列表的数据：https://m.you.163.com/item/cateList.json?__timestamp=1630131286110&categoryId=
      try {
        const result = await reqCateListNav();
        this.cateListNav = result.data.categoryL1List;
      } catch (error) {
        console.log(error);
      }
    },
    async getCurrentCateList(id) {
      //第二步，通过第一步获取的数据，从中找到id数据，并将其传递过来
      try {
        //将获取到的id，运用到第二个接口中，发起请求获取数据
        //https://m.you.163.com/item/cateList.json?timestamp=1630131455012&categoryId=1005000,将这里修改为
        //`https://m.you.163.com/item/cateList.json?timestamp=1630131455012&categoryId=${categoryId}`
        const result = await reqCurrentCateList(id);
        //将大图的信息存储给currentBanner
        this.currentBanner = result.data.currentCategory.bannerList[0];
        //将商品分类的信息存储给currentCateList
        this.currentCateList = result.data.categoryGroupList;
      } catch (error) {
        console.log(error);
      }
    },
    //跳转链接
    toCategoryList(subCategoryId, categoryId) {
      this.subCategoryId = subCategoryId
      this.categoryId = categoryId
      this.$router.push({
        path: "/categorylist",
        query: {
          subCategoryId: this.subCategoryId,
          categoryId: this.categoryId,
        },
      });
    },
    toSearch() {
      this.$router.push("/search")
    }
  },
};
</script>

<style lang="less">
.cateList {
  // 头部
  .cateListHeader {
    width: 100%;
    height: 10%;
    border-bottom: 1px solid #ccc;
  }
  // 内容区域
  .m-cateListMain {
    display: flex;
    // 左侧导航
    .cateListNav {
      border-right: 1px solid #ccc;
      .navItem {
        height: 5px;
      }
    }
    // 右侧主体
    .cateListMain {
      flex: 1;
      height: 500px;
      padding: 15px;
      // 上方图片
      .banner {
        text-align: center;
        position: relative;
        font-size: 15px;
        margin-bottom: 0.32rem;
      }
    }
  }
}
</style>
